<template>
  <div class="modify-dialog">
    <slot> </slot>
    <el-dialog top="8vh" v-bind="dialogOpts" :visible.sync="dialogVisible">
      <!-- <div style="display: inline-block; margin-right: 20px">
				<el-button @click="showGoods = true" size="small" type="success">
					选择商品
				</el-button>
			</div> -->
      <div style="display: inline-block">
        <el-upload
          :show-file-list="false"
          :headers="headers"
          :action="`${$apiHost}/order/quotation/import/execl`"
          :on-success="onSuccess"
        >
          <el-button size="small" type="primary">上传报价单Excel</el-button>
        </el-upload>
      </div>
      <div
        style="display: inline-block; margin-left: 20px"
        v-if="notFound.length"
      >
        <el-button @click="showNotFound = true" size="small" type="danger">
          {{ notFound.length }}条未导入成功
        </el-button>
      </div>
      <div v-if="totalCount" style="display: inline-block; margin-left: 20px">
        总共{{ totalCount }}个材料，总价{{ salePrice }}元
      </div>
      <div style="height: 65vh">
        <el-table :data="tableSource" height="100%">
          <el-table-column label="序号" min-width="50">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="材料ID" prop="id" min-width="100px">
          </el-table-column>
          <el-table-column
            label="材料编号"
            prop="productCode"
            min-width="100px"
          >
          </el-table-column>
          <el-table-column
            label="材料名称"
            prop="productName"
            min-width="150px"
          >
          </el-table-column>
          <el-table-column label="金额" prop="price" min-width="150px">
          </el-table-column>
          <el-table-column label="色号" prop="colour" min-width="150px">
          </el-table-column>
          <el-table-column label="规格" prop="norms" min-width="150px">
          </el-table-column>
          <el-table-column label="单位" prop="unit" min-width="150px">
          </el-table-column>
          <el-table-column label="套件" prop="d_name" min-width="150px">
          </el-table-column>
          <el-table-column label="数量" prop="count" min-width="150px">
          </el-table-column>
          <!-- <el-table-column
						label="数量（点击编辑）"
						fixed="right"
						min-width="150px"
					>
						<editable-cell
							slot-scope="{ row }"
							:can-edit="true"
							type="number"
							v-model="row.count"
						>
							<span slot="content">{{ row.count }}</span>
						</editable-cell>
					</el-table-column> -->
        </el-table>
      </div>
      <div class="dialog-footer" style="margin-top: 20px">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-bind="{ ...dialogOpts, title: '选择商品', width: '80vw' }"
      :visible.sync="showGoods"
      top="6vh"
    >
      <div style="height: 70vh">
        <ProductManage v-if="showGoods" ref="goodRef" mode="choose" />
      </div>
      <div class="dialog-footer" style="margin-top: 20px">
        <el-button @click="showGoods = false">取 消</el-button>
        <el-button type="primary" @click="onConfirmGoods"> 确 定 </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-bind="{ ...dialogOpts, title: '未导入成功', width: '60vw' }"
      :visible.sync="showNotFound"
      top="6vh"
    >
      <div style="height: 60vh">
        <notFound :notFound="notFound" />
      </div>
      <div class="dialog-footer" style="margin-top: 20px">
        <el-button type="primary" @click="showNotFound = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import EditableCell from "./EditableCell.vue";
import ProductManage from "../ProductManage.vue";
import notFound from "./notFound.vue";
export default {
  mixins: [modifyMixins],
  components: {
    EditableCell,
    ProductManage,
    notFound,
  },
  data() {
    return {
      dialogTitle: "制作报价单",
      dialogWidth: "75vw",
      showNotFound: false,
      showGoods: false,
      tableSource: [],
      directorys: [],
      notFound: [],
    };
  },
  computed: {
    salePrice() {
      const { add, mul } = this.$acc;
      return this.tableSource.reduce(
        (a, b) => add(a, mul(b.count, b.price)),
        0
      );
    },
    totalCount() {
      const { add } = this.$acc;
      return this.tableSource.reduce((a, b) => add(a, b.count), 0);
    },
    prodMap() {
      const res = {};
      const { tableSource } = this;
      tableSource.forEach((item) => {
        res[item.id] = true;
      });
      return res;
    },
    headers() {
      const token = this.tokenv3 || this.$quinn.getStorage("tokenv3");
      return {
        token,
      };
    },
  },
  mounted() {
    // this.showNotFound = true;
  },
  methods: {
    onSuccess(res) {
      const data = res?.result?.filterMaterial || [];
      this.notFound = res?.result?.notFound || [];
      this.directorys = (res?.result?.directorys || []).map((e) => ({
        id: e.id,
        count: e.count,
      }));
      if (Array.isArray(data)) this.importData(data);
    },
    onConfirmGoods() {
      const { goodRef } = this.$refs;
      if (goodRef) {
        const { tableRef } = goodRef.$refs;
        if (tableRef) {
          const { multipleSelection } = tableRef;
          const arr = JSON.parse(
            JSON.stringify(
              multipleSelection.map((e) => {
                e.count = 0;
                return e;
              })
            )
          );
          this.showGoods = false;
          this.importData(arr);
        }
      }
    },
    onConfirm() {
      const { id } = this.row || {};
      const params = {
        id,
        quoteDosage: this.directorys,
      };
      // return console.log(params);
      this.$api.createQuotation(params).then(this.submitDoneMsg);
    },
    importData(data = []) {
      data = data.map((e) => {
        for (const k in e.directory) {
          if (Object.hasOwnProperty.call(e.directory, k)) {
            const v = e.directory[k];
            e[`d_${k}`] = v;
          }
        }
        e.count = `${e.count || 0}`;
        return e;
      });
      const { prodMap, tableSource } = this;
      let tableData = JSON.parse(JSON.stringify(tableSource));
      const arr = [];
      const map = {};
      data.forEach((e) => {
        if (prodMap[e.id]) map[e.id] = e.count;
        else arr.push(e);
      });
      tableData = tableData.map((e) => {
        if (Object.hasOwnProperty.call(map, e.id)) {
          const v = parseInt(e.count) + parseInt(map[e.id]);
          e.count = `${isNaN(v) ? e.count : v}`;
        }
        return e;
      });
      this.tableSource = [...arr, ...tableData];
      console.log(this.tableSource);
    },
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.modify = modify || "add";
      this.tableSource = [];
      this.formKey = this.$quinn.guid();
    },
  },
};
</script>

<style lang="less" scoped>
.edit-cell {
  min-height: 40px;
  cursor: pointer;
}
</style>
